<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

<div style="cursor:pointer;" onclick="change(this)">切换</div>

<div>显示、隐藏这里的内容</div>

</body>
<script type="text/javascript">
//显示、隐藏内容
//this  系统内容的关键字,可以指对象本身（自定义对象）；也可以作为 参数 指定对象

function change(obj){
	
	/*var n = obj.nextSibling;
	alert(n.nodeType);*/
	
	//如果是 IE8- 那就是得到  1  直接找到<div>
	//如果是 火狐、谷歌、IE9/IE10     3   是找到文本节点（换行）
	/*var n = obj.nextElementSibling; //IE8- 识别不了
	alert( n.nodeType );*/
	
	
	//针对浏览器获取节点的结果不一样，那有以下几种方式处理：
	
	
	//方法一：不换行
	//var n = obj.nextSibling;
	
	//方法二：判断是什么浏览器
	/*var na = window.navigator.userAgent;
	if( na.indexOf('MSIE') == -1 || na.indexOf('MSIE 9.0') > 0 || na.indexOf('MSIE 10.0') > 0 ){   //判断不是 IE8-
		var n = obj.nextElementSibling;
	}else{
		var n = obj.nextSibling;	//IE8/IE7/IE6
	}*/
	
	
	//方法三：判断节点类型的取值
	/*var n = obj.nextSibling;
	if( n.nodeType == 3 ){
		n = obj.nextElementSibling;
	}*/
	
	//方法四：  nextElementSibling  火狐、谷歌、IE9/IE10  可以使用
	//var n = obj.nextElementSibling || obj.nextSibling;
	
	
	//方法五：
	var n = obj.nextSibling;
	while( n.nodeType == 3 ){
		n = n.nextSibling; //只循环一次
	}
	
	
	//三元运算符
	n.style.display = n.style.display == 'none' ? 'block' : 'none' ;
	
 	//IE8、IE7、IE6浏览器在用 nextSibling 或 previousSibling 获取节点的时候，会超过文本节点，直接获取相邻的元素节点，只认相邻的元素节点为兄弟节点
}
</script>

</html>
